<template>
  <section class="muEssay">
    <div class="text">
      <h3>{{title}}</h3>
      <div class="time">{{time}}</div>
    </div>
    <div class="content" v-html="content">
      <p>{{content}}</p>
      <div class="prev muBtn pull-left">上一篇</div>
      <div class="next muBtn pull-right">下一篇</div>
    </div>
  </section>
</template>
<style lang="less">
  .muEssay {
    max-width: 1160px;
    margin: 0 auto;
    .text {
      text-align: center;
      border-bottom: 1px solid #ccc;
      .time {
        line-height: 30px;
      }
    }
    .muBtn {
      background: #267cc1;
      padding: 4px 20px !important;
      border-radius: 4px;
      margin: 0;
      text-indent: 0em;
      cursor: pointer;
      color: white;
    }
    .content {
      text-indent: 2em;
      padding-top: 50px;
      padding-bottom: 60px;
      p {
        padding-bottom: 50px;
      }
    }
  }

  @media screen and (max-width: 900px) {
    .muEssay {
      .content {
        padding-left: 10px;
        padding-right: 10px;
      }
    }
  }

</style>
<script>
  export default {
    name: 'essay',
    props: {
      title: {
        type: String,
        default: ''
      },
      content: {
        type: String,
        default: ''
      },
      time: {
        type: String,
        default: ''
      }
    }
  }

</script>
